.demographics-panel.text-left
  .row
    .col-xs-6
      .form-group(v-bind:class="{ 'has-error': showRequired && !numStudents }")
        span.control-label {{ $t("courses.number_programming_students") }}
        .help-block.small
          em.text-info {{ $t("teachers_quote.num_students_help") }}
        select.form-control(v-model="numStudents", ref='focus' name="numStudents")
          option(value='') {{ $t("teachers_quote.num_students_default") }}
          option 1-10
          option 11-50
          option 51-100
          option 101-200
          option 201-500
          option 501-1000
          option 1000+
        strong.help-block(v-if="showRequired && !numStudents") {{ $t("common.required_field") }}

      .form-group(v-bind:class="{ 'has-error': showRequired && !numStudentsTotal }")
        span.control-label
          span {{ $t("courses.number_total_students") }}
        select.form-control(v-model="numStudentsTotal" name="numStudentsTotal")
          option(value='') {{ $t("teachers_quote.num_students_default") }}
          option 1-500
          option 500-1,000
          option 1,000-5,000
          option 5,000-10,000
          option 10,000+
        strong.help-block(v-if="showRequired && !numStudentsTotal") {{ $t("common.required_field") }}

      div(v-bind:class="{ 'has-error': showRequired && !educationLevelComplete }")
        span.control-label {{ $t("teachers_quote.education_level_label") }}
        .help-block.small
          em.text-info {{ $t("teachers_quote.education_level_help") }}
        strong.help-block(v-if="showRequired && !educationLevelComplete") {{ $t("common.required_field") }}
        .checkbox
          label
            input(type="checkbox" value="Elementary", v-model="educationLevel", name="educationLevel")
            span {{ $t("teachers_quote.elementary_school") }}
        .checkbox
          label
            input(type="checkbox" value="Middle", v-model="educationLevel", name="educationLevel")
            span {{ $t("teachers_quote.middle_school") }}
        .checkbox
          label
            input(type="checkbox" value="High", v-model="educationLevel", name="educationLevel")
            span {{ $t("teachers_quote.high_school") }}
        .checkbox
          label
            input(type="checkbox" value="College+", v-model="educationLevel", name="educationLevel")
            span {{ $t("teachers_quote.college_plus") }}
        .checkbox
          label
            input#other-education-level-checkbox(type="checkbox", v-model="otherEducationLevel")
            span.spr {{ $t("nav.other") }}
            span {{ $t("teachers_quote.please_explain") }}
        input#other-education-level-input.form-control.m-b-2(v-model="otherEducationLevelExplanation")
        

    .col-xs-6
      span.control-label
        span {{ $t("teachers_quote.anything_else") }}
        span.spl.text-muted {{ $t("signup.optional") }}
      textarea.form-control.m-b-2(rows=8, v-model="notes")

        
      span.control-label
        span {{ $t("teachers_quote.referrer") }}
        span.spl.text-muted {{ $t("signup.optional") }}
        .help-block.small
          em.text-info {{ $t("teachers_quote.referrer_help") }}
      input#oreferrer-input.form-control(v-model="referrer")


  // In reverse order for tabbing purposes
  .history-nav-buttons
    button.next-button.btn.btn-lg.btn-navy(v-on:click="clickContinue") {{ $t("login.sign_up") }}
    button.back-button.btn.btn-lg.btn-navy-alt(type='button', v-on:click="clickBack") {{ $t("common.back") }}
